<script>
import { cloneDeep, forEach } from "lodash-es";
import draggable from "@/components/vuedraggable/vuedraggable";
import nestedDraggable from "./nested";
import DragTool from "./dragTool.vue";
export default {
  props: {
    schema: {
      type: Object,
      default: null,
    },
  },
  components: {
    draggable,
    nestedDraggable,
    DragTool,
  },
  inject: ["main"],
  render() {
    const schema = Object.freeze(cloneDeep(this.schema));
    let Comp = null;

    const loopModel = (schema, models) => {
      if (schema.tag === "aegle-input") {
        models.push(schema.name);
      } else if (schema.children && schema.children.length) {
        for (let index = 0; index < schema.children.length; index++) {
          const element = schema.children[index];
          loopModel(element, models);
        }
      }
    };

    function onAdd(e, containerSchema) {
      console.log(1);
      const models = [];
      if (containerSchema.tag == "aegle-form") {
        loopModel(schema, models);

        models.forEach((item) => {
          containerSchema.props.model[item] = null;
        });
      }
    }

    function onChange(e, schema) {
      // const { added } = e;
      // if (added) {
      //   const { element } = added;
      //   schema.props.label = element.label;
      //   // if (schema.tag == "aegle-form" && added && element.tag == "aegle-input") {
      //   //   const {name} = element.config
      //   //   schema.config.props.model[name] = null
      //   // }
      //   element.parent = schema;
      //   if (schema.tag === "el-form-item" && schema.children.length > 1) {
      //     let index = schema.children.findIndex(
      //       (item) => item.id == element.id
      //     );
      //     if (~index) {
      //       schema.children.splice(index, 1);
      //     }
      //   }
      // }
    }

    function beforeChange(innerSchema, schema) {
      innerSchema.parent = schema;

      if (innerSchema.props.model) {
        const weakMap = new Map();

        innerSchema.modelMap = new Proxy(innerSchema.props.model, {
          get(target, attr) {
            return target[attr];
          },
          set(target, attr, value) {
            if (weakMap.has(attr)) {
              const id = weakMap.get(attr);
              if (id != value) {
                Reflect.deleteProperty(target, id);
              }
            }
            Reflect.set(target, value, null);
            weakMap.set(attr, value);
            return true;
          },
        });
      }

      // 在form model 中注册 field

      const findModelMap = (schema) => {
        while (schema) {
          if (schema.modelMap) {
            return schema.modelMap;
          }
          schema = schema.parent;
        }
      };

      const modelMap = findModelMap(schema);
      if (modelMap) {
        modelMap[innerSchema.id] = innerSchema.name;
      }
    }

    function handleAddItem(schema) {
      const elCol = {
        tag: "el-col",
        props: {
          span: 24,
        },
        id: +new Date(),
        children: [],
        parent: schema,
      };

      const elFormItem = {
        tag: "el-form-item",

        props: {
          label: "",
          prop: "",

          style: { "min-height": "50px" },
        },
        children: [],
        id: +new Date() + 1,
        parent: elCol,
      };
      elCol.children.push(elFormItem);
      schema.children.push(elCol);
    }

    let Actions = null;
    if (this.schema.tag === "aegle-form" || this.schema.tag == "el-col") {
      Actions = (
        <span class={["action-group"]}>
          {this.schema.tag === "aegle-form" ? (
            <span
              class={["action-item el-icon-circle-plus-outline"]}
              onClick={() => {
                handleAddItem(this.schema);
              }}
              title="新增控件"
            ></span>
          ) : null}
          <span
            class={["action-item el-icon-copy-document"]}
            onClick={() => {
              this.main.copy(this.schema);
            }}
            title="复制"
          ></span>
          <span
            class={["action-item el-icon-delete"]}
            onClick={() => {
              this.main.delete(this.schema.id);
            }}
            title="删除"
          ></span>
        </span>
      );
    }

    const TipComp = <span>请拖入表单控件</span>;
    Comp = (
      <DragTool style={{ height: "auto" }} schema={this.schema}>
        <draggable
          class={["drag-box"]}
          tag={this.schema.tag}
          list={this.schema.children}
          component-data={{
            props: {
              schema: this.schema,
              ...this.schema.props,
              span: 24,
            },
          }}
          group={{ name: "people" }}
          onAdd={(e) => {
            // onAdd(e, this.schema);
          }}
          onChange={(e) => {
            onChange(e, this.schema);
          }}
          beforeChange={(innerSchema) => beforeChange(innerSchema, this.schema)}
          onStart={(e) => {
            console.log(e);
          }}
          handle=".drag-handle"
        >
          {this.schema.children.map((item) => (
            <nestedDraggable schema={item} />
          ))}
        </draggable>
      </DragTool>
    );

    Comp = (
      <el-col props={{ ...this.schema.props }} style={this.schema.style}>
        {Comp}
      </el-col>
    );

    return (
      // <draggable tag="div" list={schema.children} group={{ name: "people" }}>
      Comp
      // </draggable>
    );
  },
};
</script>

<style lang="scss" scoped>
.drag-box {
  min-height: 60px;
}

.draggable-drag {
  height: 100%;
}
</style>
